<template>
  <div>
    <el-container>


      <el-main>
        <el-button type="primary" @click="createRoom" :disabled="button.createRoomDisabled">创建房间</el-button>
        <el-button type="primary" @click="joinRoom" :disabled="button.createRoomDisabled">加入房间</el-button>
        <el-button type="primary" @click="subscribe">订阅sse</el-button>
        <el-button type="primary" @click="publish">发布sse</el-button>
        <el-button type="primary" @click="test">test</el-button>
        <div>
          接受到的消息： {{ message }}
        </div>
        <el-input v-model="content"></el-input>

        <room01 v-show="component.room01" ref="room01" :room="room"></room01>
      </el-main>
    </el-container>


  </div>
</template>
<script>
import {createRoom, publish, test} from "@/api/games/go/room";
import {getToken} from "@/utils/auth";

import {EventSourcePolyfill} from "event-source-polyfill";
import Room01 from "@/views/games/go/component/room01.vue";

export default {
  components: {Room01},
  data() {
    return {
      content: "",
      message: "",
      component:{
        room01:false
      },
      room:{
        id:"",
        name:'',
        createTime:'',
        createByUserId:'',
      },
      button:{
        createRoomDisabled:false
      }
    }
  },
  methods: {
    //todo 加入房间
    joinRoom(){

    },
    createRoom() {
      this.component.room01=true
      createRoom({}).then((res)=>{
        this.room = res.data
        console.log(this.room)
        let userMap = this.room.userMap
        this.$refs.room01.tableData=[]
        this.room.userIdList.forEach((userId)=>{
          let user =userMap[userId]
          let item={
            userId: user.userId,
            userName: user.userName,
            status: '已准备'
          }
          this.$refs.room01.tableData.push(item)
          this.button.createRoomDisabled=true
        })
        this.getSseOfRoom(this.room.id)

      })
    },
    getSseOfRoom(roomId){
      if (typeof (EventSource) !== "undefined") {
        const url = process.env.VUE_APP_MSG_SERVER_URL
        var source = new EventSourcePolyfill("/dev-api/goController/getSse/room/"+roomId,
          {
            headers: {
              withCredentials: true,
              Authorization: `Bearer ${getToken()}`
            },

          }
        );
        source.onmessage = function (event) {
          that.message = that.message + event.data
          console.log(this.message)
        };
        source.onerror = function (event) {
          source.close()
        }
      } else {
        this.message == "抱歉，您的浏览器不支持 server-sent 事件 ..."
        // document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
      }
    },
    test() {
      test(1).then(res => {
        this.$message.success(res.data)
      })

    },
    publish() {
      let param = {
        id: "1",
        content: this.content
      }
      publish(param).then(res => {
        this.$message.success(res.message)
        this.content = ""
      })
    },
    subscribe() {
      console.log(getToken())
      let that = this
      if (typeof (EventSource) !== "undefined") {
        const url = process.env.VUE_APP_MSG_SERVER_URL
        var source = new EventSourcePolyfill("/dev-api/sseController/subscribe/1",
          {
            headers: {
              withCredentials: true,
              Authorization: `Bearer ${getToken()}`
            },

          }
        );
        source.onmessage = function (event) {
          that.message = that.message + event.data
          // document.getElementById("result").innerHTML+=event.data + "<br />";
          // document.getElementById("result").innerHTML+=event.data + "<br />";
          // console.log(event.data)
          // if (event.data.indexOf('100000')!=-1){
          //   source.close()
          // }
        };
        source.onerror = function (event) {
          source.close()
        }
      } else {
        this.message == "抱歉，您的浏览器不支持 server-sent 事件 ..."
        // document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
      }
    }
  },
}
</script>
<style lang="css">

</style>
